<template>
  <div class="not-found">
    <el-result
      icon="error"
      title="访问错误"
      :sub-title="errorMessage || '无法访问表单，请检查访问链接是否正确'"
    >
      <template #extra v-if="!callback">
        <div class="actions">
          <template v-if="isLoggedIn">
            <el-button type="primary" @click="showHistory">查看历史记录</el-button>
          </template>
          <template v-else>
            <el-button type="primary" @click="handleLogin">登录查看历史记录</el-button>
          </template>
        </div>
      </template>
    </el-result>

    <!-- 填写记录 -->
    <PaperHistory v-if="historyVisible" v-model:show="historyVisible" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { getToken } from '@ruifox-cms/utils/src/storage'
import PaperHistory from './components/PaperHistory.vue'

const route = useRoute()
const errorMessage = ref(route.query.message || '')
const callback = ref(route.query.callback || '')
// 登录状态
const isLoggedIn = ref(!!getToken())

// 历史记录相关
const historyVisible = ref(false)

// 处理登录
const handleLogin = () => {
  if (process.env.NODE_ENV === 'development') {
    window.location.href = location.protocol + '//' + location.hostname + ':8100/login/index?redirect=' + location.href
  } else {
    window.location.href = location.origin + '/ram/login/index?redirect=' + location.href
  }
}

// 显示历史记录
const showHistory = () => {
  historyVisible.value = true
}
</script>

<style lang="scss" scoped>
.not-found {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;

  :deep(.el-result) {
    background: #fff;
    padding: 48px 32px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .el-result__title {
      font-size: 24px;
      color: #303133;
    }

    .el-result__subtitle {
      margin-top: 10px;
      font-size: 14px;
      color: #606266;
    }
  }

  .actions {
    margin-top: 20px;
  }
}
</style>
